<template>
	<view class=" ">
		<tn-navbar>新增商户</tn-navbar>
		<view class="tn-m">
			<tn-form ref="formRef" :model="formData" label-position="top">
				<tn-form-item label="所属车场" prop="parkingLotName"><tn-input v-model="formData.parkingLotName" disabled></tn-input></tn-form-item>
				<tn-form-item label="商家名称" prop="merchantName"><tn-input v-model="formData.merchantName"></tn-input></tn-form-item>
				<tn-form-item label="商家地址" prop="merchantAddress"><tn-input v-model="formData.merchantAddress"></tn-input></tn-form-item>
				<tn-form-item label="联系人" prop="contactPerson"><tn-input v-model="formData.contactPerson"></tn-input></tn-form-item>
				<tn-form-item label="联系方式" prop="contactNumber"><tn-input v-model="formData.contactNumber"></tn-input></tn-form-item>
				<tn-form-item label="有效期" prop="validity"><tn-input v-model="formData.validity" type="date"></tn-input></tn-form-item>
				<tn-form-item label="叠加限制" prop="stackLimit"><tn-input v-model="formData.stackLimit"></tn-input></tn-form-item>
				<tn-form-item label="优惠券类型" prop="couponType" required>
					<view @click="openPicker('couponType')">
						<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择优惠券类型"></tn-input>
					</view>
				</tn-form-item>
				<tn-form-item label="折扣额度" prop="discountAmount" required>
					<view @click="openPicker('discountAmount')">
						<tn-input style="pointer-events:none" :model-value="pickerDict.label.discountAmount[formData.discountAmount]" placeholder="请选择折扣额度"></tn-input>
					</view>
				</tn-form-item>
				<tn-form-item label="全免类型" prop="fullExemptionType" required>
					<view @click="openPicker('fullExemptionType')">
						<tn-input style="pointer-events:none" :model-value="pickerDict.label.fullExemptionType[formData.fullExemptionType]" placeholder="请选择全免类型"></tn-input>
					</view>
				</tn-form-item>
				<tn-form-item label="全免金额" prop="fullExemptionAmount"><tn-input v-model="formData.fullExemptionAmount"></tn-input></tn-form-item>
				<tn-form-item label="固定码" prop="fixedCode" required>
					<view @click="openPicker('fixedCode')">
						<tn-input style="pointer-events:none" :model-value="pickerDict.label.fixedCode[formData.fixedCode]" placeholder="请选择固定码"></tn-input>
					</view>
				</tn-form-item>
				<tn-form-item label="开始时段" prop="startTime"><tn-input v-model="formData.startTime" type="time"></tn-input></tn-form-item>
				<tn-form-item label="结束时段" prop="endTime"><tn-input v-model="formData.endTime" type="time"></tn-input></tn-form-item>
				<tn-form-item label="限制时间" prop="limitTime">
					<view @click="openPicker('limitTime')">
						<tn-input style="pointer-events:none" :model-value="pickerDict.label.limitTime[formData.limitTime]" placeholder="请选择限制时间"></tn-input>
					</view>
				</tn-form-item>
				<tn-form-item label="最大使用张数" prop="maxUsageCount"><tn-input v-model="formData.maxUsageCount"></tn-input></tn-form-item>
				<tn-form-item label="备注" prop="remarks"><tn-input v-model="formData.remarks"></tn-input></tn-form-item>
			</tn-form>
		</view>
		<!-- 选择器 -->
		<tn-picker v-model:open="openPickerVisible" :data="pickerData" @confirm="confirmPicker" @close="closePicker" />
		<view class="tn-tabbar-height"></view>
		<!-- 悬浮按钮 -->
		<view class="floating-button tn-flex justify-center">
			<tn-button @click="confirmEdit" width="80%" size="xl" text-color="tn-white" bg-color="tn-gradient-bg__cool-8">确认</tn-button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { COUPON_TYPE, DISCOUNT_AMOUNT, FULL_EXEMPTION_TYPE, FIXED_CODE, LIMIT_TIME } from '@/utils/dict'; // 引入字典
import { onLoad } from '@dcloudio/uni-app';

// 字典枚举映射
const pickerDict = ref({
	dict: {
		couponType: COUPON_TYPE,
		discountAmount: DISCOUNT_AMOUNT,
		fullExemptionType: FULL_EXEMPTION_TYPE,
		fixedCode: FIXED_CODE,
		limitTime: LIMIT_TIME
	},
	label: {}
});

// 选择器key
const pickerKey = ref('');
// 选择器数据
const pickerData = ref([]);

// 控制选择器的可见性
const openPickerVisible = ref(false);

// 打开选择器
const openPicker = (type) => {
	pickerKey.value = type;
	pickerData.value = pickerDict.value.dict[type];
	openPickerVisible.value = true; // 显示选择器
};

// 关闭选择器
const closePicker = () => {
	openPickerVisible.value = false; // 隐藏选择器
};

// 确认选择器的选择
const confirmPicker = (value) => {
	formData.value[pickerKey.value] = value;
	closePicker(); // 关闭选择器
};

// 处理字典数据格式
const getDictLabel = () => {
	pickerDict.value.label = {};
	for (let key in pickerDict.value.dict) {
		let dict = pickerDict.value.dict[key];
		pickerDict.value.label[key] = dict.reduce((acc, cur) => {
			acc[cur.value] = cur.label;
			return acc;
		}, {});
	}
};

// 更新表单数据模型
const formData = ref({
	parkingLotName: null,
	merchantName: '',
	merchantAddress: '',
	contactPerson: '',
	contactNumber: '',
	validity: '',
	stackLimit: '',
	couponType: '',
	discountAmount: '',
	fullExemptionType: '',
	fullExemptionAmount: '',
	fixedCode: '',
	startTime: '',
	endTime: '',
	limitTime: '',
	maxUsageCount: '',
	remarks: ''
});

const confirmEdit = () => {
	// TODO: 提交表单数据
	console.log(formData.value);
};

onLoad(() => {
	getDictLabel();
});
</script>

<style lang="scss" scoped>
/* 底部安全边距 start*/
.tn-tabbar-height {
	min-height: 180rpx;
	height: calc(180rpx + env(safe-area-inset-bottom) / 2);
	height: calc(180rpx + constant(safe-area-inset-bottom));
}

/* 悬浮按钮样式 */
.floating-button {
	position: fixed;
	bottom: 20rpx;
	left: 0;
	right: 0;
	margin: 0 auto;
}
</style>
